<template>
  <nav-bar></nav-bar>
  <el-backtop :right="80" :bottom="100" />
  <div class="monitor-box">
    <div class="item-box" v-for="item in monitordata" :key="item.id">
      <div>
        <video
          class="item-video"
          src="@/assets/images/TomJack.mp4"
          autoplay
          muted
          controls
          loop
        ></video>
      </div>
      <div class="item-info">
        <div class="item-info-id">监控编号：{{ item.id }}</div>
        <div class="item-info-position">位置：{{ item.position }}</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue"
import { getMonitorData } from "./Hooks/useGetMonitor"
import NavBar from "../../components/NavBar.vue"
const monitordata = ref([])
getMonitorData(monitordata)
</script>
<style scoped lang="stylus">
.monitor-box
    width:85%
    display:flex
    flex-wrap:wrap
    justify-content space-evenly
    margin 10px auto
    // background-color red
    .item-box
      height:260px
      width 380px
      // background-color pink
      padding:2px
      margin:10px 10px
      border:2px solid #ccc
      border-radius:3px
      cursor pointer
      .item-video
        height 213px
        width 380px
        /* background-color orange */
      .item-info
        width 380px
        display flex
        flex-direction:column
        .item-info-id
          color:#666
          padding 1px
          font-size:10px
        .item-info-position
          color:#333
          padding 1px
          font-size:15px
</style>
